<div class="map-com">
    <span class="sline"></span>
    <span class="text">查询数据</span>
</div>
<div class="clear">
    <nz-tree-select class=" first-input2 fm-input2" [nzShowSearch]="true" [(ngModel)]="layerId" nzPlaceHolder="请选择"
        [nzDropdownMatchSelectWidth]="true" [nzDropdownStyle]="{ 'max-height': '300px' }" [nzAsyncData]="true"
        [nzNodes]="layerDic.treeDatas" (nzOpenChange)="layerDic.load('0',true)"
        (nzExpandChange)="layerDic.expand($event)" (ngModelChange)="onChange($event)">
    </nz-tree-select>
</div>

<div class="map-com" *ngIf="filterFroms && filterFroms.length>0">
    <span class="sline"></span>
    <span class="text">查询条件</span>
</div>

<form nz-form class="clear" *ngIf="filterFroms && filterFroms.length>0">

    <!-- 动态表单生成 -->
    <div [formGroup]="form">
        <ng-template ngFor let-item [ngForOf]="filterFroms">
            <nz-form-item class="first-input1 fm-input2" [ngSwitch]="item.controlType">
                <!-- 输入框 -->
                <input *ngSwitchCase="'textbox'" [(ngModel)]="form.value[item.key]" [id]="item.key"
                    [formControlName]="item.key" [type]="item.type" [placeholder]="item.placeholder" nz-input>

                <!-- 下拉框 -->
                <ng-container *ngSwitchCase="'dropdown'">
                    <!-- 普通下拉框 -->
                    <nz-select *ngIf="item.type == 'ordinary'" [id]="item.key" [formControlName]="item.key"
                        [(ngModel)]="form.value[item.key]" [nzPlaceHolder]="item.placeholder"
                        (nzOpenChange)="item.dictionaryService.load('0')">
                        <nz-option *ngFor="let option of item.dictionaryService.datas" [nzValue]="option.id"
                            [nzLabel]="option.display">
                        </nz-option>
                        <nz-option *ngIf="item.dictionaryService.isLoading" nzDisabled nzCustomContent>
                            <i nz-icon type="loading" class="loading-icon"></i>加载中...
                        </nz-option>
                    </nz-select>

                    <nz-tree-select *ngIf="item.type == 'tree'" [id]="item.key" [formControlName]="item.key"
                        [(ngModel)]="form.value[item.key]" [nzPlaceHolder]="item.placeholder"
                        (nzOpenChange)="item.dictionaryService.load('0',false)"
                        [nzDropdownStyle]="{ 'max-height': '250px' }"
                        (nzExpandChange)="item.dictionaryService.expand($event)"
                        [nzNodes]="item.dictionaryService.treeDatas">
                    </nz-tree-select>

                    <!-- 级联下拉框 最多三级-->
                    <ng-container *ngIf="item.type == 'cascade'" [ngSwitch]="cascadeData[item.key]['leavel']">

                        <ng-container *ngIf="firstCascadePid == '0'">
                            <nz-select *ngSwitchCase=1 [id]="item.key" [formControlName]="item.key"
                                [(ngModel)]="form.value[item.key]" [nzPlaceHolder]="item.placeholder"
                                (nzOpenChange)="item.dictionaryService.loadOne()"
                                (ngModelChange)="item.dictionaryService.clear(form.value, cascadeData ,1 )">
                                <nz-option *ngFor="let option of item.dictionaryService.one" [nzValue]="option.id"
                                    [nzLabel]="option.display">
                                </nz-option>
                                <nz-option *ngIf="item.dictionaryService.isLoading" nzDisabled nzCustomContent>
                                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                                </nz-option>
                            </nz-select>

                            <nz-select *ngSwitchCase=2 [id]="item.key" [formControlName]="item.key"
                                [(ngModel)]="form.value[item.key]" [nzPlaceHolder]="item.placeholder"
                                (ngModelChange)="item.dictionaryService.clear(form.value, cascadeData,2)"
                                (nzOpenChange)="item.dictionaryService.loadTwo(form.value[cascadeData[item.key]['load']])">
                                <nz-option *ngFor="let option of item.dictionaryService.two" [nzValue]="option.id"
                                    [nzLabel]="option.display">
                                </nz-option>
                                <nz-option *ngIf="item.dictionaryService.isLoading" nzDisabled nzCustomContent>
                                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                                </nz-option>
                            </nz-select>

                            <nz-select *ngSwitchCase=3 [id]="item.key" [formControlName]="item.key"
                                [(ngModel)]="form.value[item.key]" [nzPlaceHolder]="item.placeholder"
                                (ngModelChange)="item.dictionaryService.clear(form.value, cascadeData,3)"
                                (nzOpenChange)="item.dictionaryService.loadThree(form.value[cascadeData[item.key]['load']])">
                                <nz-option *ngFor="let option of item.dictionaryService.three" [nzValue]="option.id"
                                    [nzLabel]="option.display">
                                </nz-option>
                                <nz-option *ngIf="item.dictionaryService.isLoading" nzDisabled nzCustomContent>
                                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                                </nz-option>
                            </nz-select>

                        </ng-container>

                        <ng-container *ngIf="firstCascadePid != '0'">

                            <nz-select *ngSwitchCase=1 [id]="item.key" [formControlName]="item.key"
                                [(ngModel)]="form.value[item.key]" [nzPlaceHolder]="item.placeholder"
                                (nzOpenChange)="item.dictionaryService.loadTwo(cascadeData[item.key]['pid'])"
                                (ngModelChange)="item.dictionaryService.clear(form.value, cascadeData,1)">
                                <nz-option *ngFor="let option of item.dictionaryService.two" [nzValue]="option.id"
                                    [nzLabel]="option.display">
                                </nz-option>
                                <nz-option *ngIf="item.dictionaryService.isLoading" nzDisabled nzCustomContent>
                                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                                </nz-option>
                            </nz-select>

                            <nz-select *ngSwitchCase=2 [id]="item.key" [formControlName]="item.key"
                                [(ngModel)]="form.value[item.key]" [nzPlaceHolder]="item.placeholder"
                                (ngModelChange)="item.dictionaryService.clear(form.value, cascadeData,2)"
                                (nzOpenChange)="item.dictionaryService.loadThree(form.value[cascadeData[item.key]['load']])">
                                <nz-option *ngFor="let option of item.dictionaryService.three" [nzValue]="option.id"
                                    [nzLabel]="option.display">
                                </nz-option>
                                <nz-option *ngIf="item.dictionaryService.isLoading" nzDisabled nzCustomContent>
                                    <i nz-icon type="loading" class="loading-icon"></i>加载中...
                                </nz-option>
                            </nz-select>

                        </ng-container>

                    </ng-container>

                </ng-container>
            </nz-form-item>
        </ng-template>
    </div>

    <nz-form-item class="item first-input2" style="padding-top: 10px;">
        <label nz-checkbox class="text" [(ngModel)]="inExtent" [ngModelOptions]="{standalone: true}">地图范围</label>
    </nz-form-item>

    <nz-form-item class="item  first-input2">
        <button nz-button nzType="default" class="form-button" [nzLoading]="searchService.resetIsLoading"
            (click)="resetObject()">重置</button>
        <button nz-button [nzType]="'primary'" [nzLoading]="searchService.searchIsLoading" class="form-button"
            style="margin-left: 20px;" (click)="attributeSearch()">查询</button>
    </nz-form-item>
</form>


<div class="map-com">
    <span class="sline"></span>
    <span class="text">查询列表</span>
</div>

<div class="clear" *ngIf="searchService && searchService.ss">
    <div *ngFor="let r of searchService.pageList" class="map-search-item"
        (click)="reInitAttributeService();searchService.local(r);searchService.ss.info(r);"
        (mouseenter)="searchService.clickhHighlight(r);">

        <div class="map-search-title">
            <ng-template ngFor let-item let-i="index" [ngForOf]="titleFields">
                <label *ngIf="i == titleFields.length - 1 ;else other">
                    {{item.aliasName}}：{{r.properties[item.name]}}
                </label>
                <ng-template #other>
                    {{item.aliasName}}：{{r.properties[item.name]}} ，
                </ng-template>
            </ng-template>
        </div>

        <div class="map-search-content">
            <ng-template ngFor let-item let-i="index" [ngForOf]="contentFields">
                <label *ngIf="i == contentFields.length - 1 ;else other">
                    {{r.properties[item.name]}}
                </label>
                <ng-template #other>
                    <ng-container *ngIf="r.properties[item.name]">
                        {{r.properties[item.name]}}---
                    </ng-container>
                </ng-template>
            </ng-template>
        </div>

        <div class="map-search-local">
            <span class="form-edit" (click)="searchService.ss.localByCenter(r);"><i nz-icon type="environment"></i>定位</span>
            <nz-divider nzType="vertical"></nz-divider>
            <span class="form-edit"><i nz-icon type="message"></i>详情</span>
        </div>
    </div>

    <nz-pagination [nzTotal]="searchService.ss.rowsCount" [(nzPageIndex)]="searchService.ss.pageIndex"
        [(nzPageSize)]="searchService.ss.pageSize" (nzPageIndexChange)="searchService.loadPage();" [nzSize]="'small'"
        [nzShowTotal]="totalTemplate" class="map-search-page"></nz-pagination>
    <ng-template #totalTemplate let-total>总 {{total}} 条</ng-template>
</div>

<!-- 属性查询动态弹窗 -->
<div [id]="paras.layerName+'-attribute-search'" style="display:none;">
    <table id="attribute-search-table-b" class="table-b">
        <tr *ngFor="let item of showFields">
            <td width="40%" class="table-b-title">{{item.aliasName}}:</td>
            <td width="60%">~[{{item.name}}]</td>
        </tr>
    </table>
</div>